<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>夏吉尔人物卡</title>
    <link rel="shortcut icon" href="favicon.ico">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.15.2/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/style.css">
</head>

<body class="bg-light">

    <div class="container" id="app">

        <div class="py-5 text-center">
            <div class="container d-flex justify-content-md-center">
                <div class="logo_img"><img src="img/head.jpeg" class="img-fluid" alt="主图"></div>
            </div>
            <h2 class="mt-3">夏吉尔人物卡</h2>
            <p class="lead">
                随机属性升级，因附魔体系大改，因而角色属性需要重写
            </p>
        </div>
        <!-- <div class="input-group">
            <div class="input-group-prepend">
                <span class="input-group-text">数据包</span>
            </div>
            <input type="text" class="form-control" placeholder="" required="" @blur="">
        </div> -->
        <div class="row">
            <div class="col-md-4"><a class="btn btn-primary btn-lg w-100" style="position: relative;"
                    href="index.html">返回首页</a></div>
            <div class="col-md-4"><a class="btn btn-primary btn-lg w-100" style="position: relative;"
                    href="simulator.html">战斗模拟器</a></div>
            <div class="col-md-4"><a class="btn btn-primary btn-lg w-100" style="position: relative;">导入人物数据<input
                        type="file" class="form-control-file" id="files"
                        style="opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;"
                        @change="loadFiles"></a></div>
        </div>
        <hr class="mb-4">
        <div class="row">
            <div class="col-md-4 order-md-2 mb-4">
                <h4 class="d-flex justify-content-between align-items-center mb-3">
                    <span class="text-muted">人物卡</span>
                    <span class="badge badge-secondary badge-pill">{{pcInfo.PLname}}</span>
                </h4>
                <ul class="list-group mb-3">
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">角色名</h6>
                        </div>
                        <span class="text-muted">{{pcInfo.name}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">性别</h6>
                        </div>
                        <span class="text-muted">{{pcInfo.sex}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">年龄</h6>
                        </div>
                        <span class="text-muted">{{pcInfo.age}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">等级</h6>
                        </div>
                        <span class="text-muted" v-if="pcInfo.level == 0">残疾人</span>
                        <span class="text-muted" v-if="pcInfo.level == 1">学徒级</span>
                        <span class="text-muted" v-if="pcInfo.level == 2">学院级</span>
                        <span class="text-muted" v-if="pcInfo.level == 3">神官级</span>
                        <span class="text-muted" v-if="pcInfo.level == 4">主教级</span>
                        <span class="text-muted" v-if="pcInfo.level == 5">史诗级</span>
                        <span class="text-muted" v-if="pcInfo.level == 6">神话级</span>
                        <span class="text-muted" v-if="pcInfo.level == 7">主神级</span>

                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">等级评分</h6>
                        </div>
                        <span class="text-muted">{{pcInfo.levelPoint}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">金钱</h6>
                        </div>
                        <span class="text-muted">{{pcInfo.coin}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">EXP</h6>
                        </div>
                        <span class="text-muted">{{pcInfo.exp}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">死亡次数</h6>
                        </div>
                        <span class="text-muted">{{pcInfo.death}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">身高</h6>
                        </div>
                        <span class="text-muted">{{pcInfo.height}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">体重</h6>
                        </div>
                        <span class="text-muted">{{pcInfo.weight}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">职业</h6>
                        </div>
                        <span class="text-muted">{{pcInfo.occupation}}</span>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>所属势力</span>
                        <strong>{{pcInfo.power}}</strong>
                    </li>
                    <li class="list-group-item d-flex justify-content-between">
                        <span>荣誉</span>
                        <strong>{{pcInfo.honour}}</strong>
                    </li>
                    <li class="list-group-item d-flex justify-content-between lh-condensed">
                        <div>
                            <h6 class="my-0">背景故事</h6>
                            <small class="text-muted">{{pcInfo.story}}</small>
                        </div>
                    </li>
                </ul>

                <!-- <form class="card p-2">
            <div class="input-group">
              <input type="text" class="form-control" placeholder="Promo code">
              <div class="input-group-append">
                <button type="submit" class="btn btn-secondary">Redeem</button>
              </div>
            </div>
          </form> -->
            </div>
            <div class="col-md-8 order-md-1">
                <h4 class="mb-3">人物卡创建</h4>
                <form class="needs-validation" novalidate="">
                    <div class="mb-3">
                        <label for="userPLname">扮演者<span class="text-muted">(PL)</span></label>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text">名字</span>
                            </div>
                            <input type="text" class="form-control" :placeholder="pcInfo.PLname?pcInfo.PLname:'请输入PL姓名'"
                                required="" v-model="pcInfo.PLname">
                        </div>
                        <label for="username">角色<span class="text-muted">(PC)</span></label>
                        <div class="input-group">
                            <div class="input-group-prepend">
                                <span class="input-group-text">名字</span>
                            </div>
                            <input type="text" class="form-control" :placeholder="pcInfo.name?pcInfo.name:'请输入扮演角色姓名'"
                                required="" v-model="pcInfo.name">
                        </div>
                        <div class="input-group mt-2">
                            <div class="input-group-prepend">
                                <span class="input-group-text">年龄</span>
                            </div>
                            <input type="text" class="form-control" :placeholder="pcInfo.age?pcInfo.age:'请输入扮演角色年龄'"
                                required="" v-model="pcInfo.age">
                        </div>
                    </div>
                    <div class="row">
                        <div class="col-6 col-md-6 mb-3">
                            <label for="zip">性别</label>
                            <select class="form-control" @change="changeSex($event)">
                                <option>男</option>
                                <option>女</option>
                            </select>
                        </div>
                    </div>

                    <div class="row">
                        <div class="col-6 col-md-6 mb-3">
                            <label>天赋特征</label>
                            <select class="form-control" @change="changeTalent($event,0)">
                                <option>请选择</option>
                                <option v-for="(item,index) in talentList"
                                    :selected="item.name==pcInfo.talent[0]||item.id==1">{{item.name}}</option>
                            </select>
                        </div>
                        <div class="col-6 col-md-6 mb-3">
                            <label>天赋特征</label>
                            <select class="form-control" @change="changeTalent($event,1)">
                                <option>请选择</option>
                                <option v-for="(item,index) in talentList"
                                    :selected="item.name==pcInfo.talent[1]||item.id==1">{{item.name}}</option>
                            </select>
                        </div>
                        <div class="col-6 col-md-6 mb-3">
                            <label>所属势力</label>
                            <select class="form-control" @change="changePower($event)">
                                <option>请选择</option>
                                <option v-for="item in powerList" :selected="item.name==pcInfo.power||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                        <div class="col-6 col-md-6 mb-3">
                            <label>元素天赋</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in elementList" :selected="item.name==pcInfo.element||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                    </div>

                    <div class="mb-3">
                        <label for="address2">背景</label>
                        <textarea type="text" class="form-control" placeholder="请描述背景人物信息" v-model="pcInfo.story">
                        </textarea>
                    </div>
                    <div class="mb-3">
                        <label for="address2">立绘</label>
                        <a class="btn btn-outline-success btn-sm ml-4" style="position: relative;">上传图片<input
                                type="file" class="form-control-file" id="image"
                                style="opacity: 0;position: absolute;top: 0;left: 0;width: 100%;height: 100%;"
                                @change="base64"></a>
                        <img class="d-block mb-4 mt-4" :src="pcInfo.image" v-if="pcInfo.image" alt="" height="160">
                    </div>
                    <h6 class="mb-3">基础属性分配<span class="text-muted">(自由属性点：{{pcInfo.attrCoin}} 初始1 健全人最低5点)</span></h6>
                    <div class="row">
                        <div class="col-4 col-md-2 mb-3">
                            <label for="zip">力量</label>
                            <input type="text" class="form-control" id="zip" placeholder="" required=""
                                :value="pcInfo.attribute.str" @change="onAttrChange($event,'str')">
                        </div>
                        <div class="col-4 col-md-2 mb-3">
                            <label for="zip">体质</label>
                            <input type="text" class="form-control" id="zip" placeholder="" required=""
                                :value="pcInfo.attribute.con" @change="onAttrChange($event,'con')">
                        </div>
                        <div class="col-4 col-md-2 mb-3">
                            <label for="zip">敏捷</label>
                            <input type="text" class="form-control" id="zip" placeholder="" required=""
                                :value="pcInfo.attribute.dex" @change="onAttrChange($event,'dex')">
                        </div>
                        <div class="col-4 col-md-2 mb-3">
                            <label for="zip">智力</label>
                            <input type="text" class="form-control" id="zip" placeholder="" required=""
                                :value="pcInfo.attribute.ler" @change="onAttrChange($event,'ler')">
                        </div>
                        <div class="col-4 col-md-2 mb-3">
                            <label for="zip">精神</label>
                            <input type="text" class="form-control" id="zip" placeholder="" required=""
                                :value="pcInfo.attribute.mag" @change="onAttrChange($event,'mag')">
                        </div>
                        <div class="col-4 col-md-2 mb-3">
                            <label for="zip">魅力</label>
                            <input type="text" class="form-control" id="zip" placeholder="" required=""
                                :value="pcInfo.attribute.chr" @change="onAttrChange($event,'chr')">
                        </div>
                        <div class="col-4 col-md-2 mb-3">
                            <label for="zip">幸运</label>
                            <input type="text" class="form-control" disabled id="zip" placeholder="10" required=""
                                :value="pcInfo.attribute.lucky" @change="onAttrChange($event,'lucky')">
                        </div>
                    </div>
                    <div id="main" ref="chart" style="width: 100%;height:300px;"></div>

                    <hr class="mb-4">

                    <h4 class="mb-3">兑换</h4>
                    <div class="row mb-3">
                        <div class="col-md-12 mb-3">
                            <label for="cc-expiration">兑换类别<span class="text-muted"></span></label>
                            <select class="form-control" @change="changebuyType($event)" v-model="buyType">
                                <option value=0>请选择</option>
                                <option value=1>技能</option>
                                <option value=2>装备</option>
                                <option value=3>其他</option>
                            </select>
                        </div>
                        <div class="col-md-12 mb-3" v-if="buyType == 1">
                            <label for="cc-expiration">技能所属派系</label>
                            <select class="form-control" @change="changeSkillType($event)">
                                <option value=0>请选择</option>
                                <option v-for="item in elementList" :value="item.id">{{item.name}}</option>
                            </select>
                        </div>
                        <div class="col-md-12 mb-3" v-if="buyType == 2">
                            <label for="cc-expiration">装备类型</label>
                            <select class="form-control" @change="changeWeaponType($event)">
                                <option value=0>请选择</option>
                                <option value=1>武器(左)</option>
                                <option value=2>武器(右)</option>
                                <option value=3>护甲</option>
                                <option value=4>头饰</option>
                                <option value=5>护符</option>
                                <option value=6>护符</option>
                                <option value=7>项链</option>
                                <option value=8>鞋</option>
                                <option value=9>背包</option>
                                <option value=10>其他</option>
                            </select>
                        </div>
                        <div class="col-md-12 mb-3" v-if="buyType == 1">
                            <label for="cc-expiration">技能选择</label>
                            <select class="form-control" @change="chooseGoods($event)">
                                <option value=0>请选择</option>
                                <option v-for="item in skillList" v-show="item.element == skillType" :value="item.id">{{item.name}}</option>
                            </select>
                            </select>
                        </div>
                        <div class="col-md-12 mb-3" v-if="buyType == 2">
                            <label for="cc-expiration">装备选择</label>
                            <select class="form-control" @change="chooseGoods($event)">
                                <option value=0>请选择</option>
                                <option v-for="item in weapon_l" v-if="weaponType == 1" :value="item.id">{{item.name}}</option>
                                <option v-for="item in weapon_r" v-if="weaponType == 2" :value="item.id">{{item.name}}</option>
                                <option v-for="item in armor" v-if="weaponType == 3" :value="item.id">{{item.name}}</option>
                                <option v-for="item in helmet" v-if="weaponType == 4" :value="item.id">{{item.name}}</option>
                                <option v-for="item in baldric1" v-if="weaponType == 5" :value="item.id">{{item.name}}</option>
                                <option v-for="item in baldric2" v-if="weaponType == 6" :value="item.id">{{item.name}}</option>
                                <option v-for="item in necklace" v-if="weaponType == 7" :value="item.id">{{item.name}}</option>
                                <option v-for="item in shoes" v-if="weaponType == 8" :value="item.id">{{item.name}}</option>
                                <option v-for="item in packet" v-if="weaponType == 9" :value="item.id">{{item.name}}</option>
                                <option v-for="item in others" v-if="weaponType == 10" :value="item.id">{{item.name}}</option>
                            </select>
                            </select>
                        </div>
                        <div class="col-md-12 mb-3"  v-if="buyType == 2&&goodsInfo.id">
                            <label for="cc-expiration">装备信息预览</label>
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">{{goodsInfo.name}}</h5>
                                    <div class="card-subtitle mb-2 text-muted" v-for="item in levelList" v-show="goodsInfo.level == item.id">等级：{{item.id==0?'残次品':item.name}}</div>
                                    <h6 class="card-subtitle mb-2 text-muted" v-if="goodsInfo.price">价格：{{goodsInfo.price}}金</h6>
                                    <p class="card-text">{{goodsInfo.desc}}
                                    </p>
                                    <!-- <a href="#" class="card-link">Card link</a>
                                  <a href="#" class="card-link">Another link</a> -->
                                </div>
                            </div>
                        </div>
                        <div class="col-md-12 mb-3"  v-if="buyType == 1&&goodsInfo.id">
                            <label for="cc-expiration">技能信息预览</label>
                            <div class="card">
                                <div class="card-body">
                                    <h5 class="card-title">{{goodsInfo.name}}</h5>
                                    
                                    <div class="card-subtitle mb-2 text-muted"></div>
                                    <div class="card-subtitle mb-2 text-muted"  v-for="item in levelList" v-show="goodsInfo.level==item.id">等级：{{item.name}}</div>
                                    <div class="card-subtitle mb-2 text-muted">类型：{{goodsInfo.type==1?'通用':goodsInfo.type==2?'魔法':goodsInfo.type==3?'近战物理':'远程物理'}}</div>
                                    <div class="card-subtitle mb-2 text-muted"  v-for="item in elementList" v-show="goodsInfo.element==item.id">元素：{{item.name}}</div>
                                    <div class="card-subtitle mb-2 text-muted">消耗：{{goodsInfo.need*goodsInfo.level}}mp/次</div>
                                    <div class="card-subtitle mb-2 text-muted">价格：{{goodsInfo.price}}EXP</div>
                                    <div class="card-subtitle mb-2 text-black-50">介绍：{{goodsInfo.desc}}</div>
                                </div>
                            </div>
                        </div>
                        <!-- <div class="col-md-12 mb-3">
                            <label for="cc-expiration">兑换物品<span
                                    class="text-muted">(请先和st确认后再写卡,可能需要st添加进列表)</span></label>
                            <input type="text" class="form-control" placeholder="请输入兑换物全称或编号" v-model="submit.level">
                        </div>
                        <div class="col-md-12 mb-3">
                            <label for="cc-cvv">描述</label>
                            <textarea type="text" class="form-control" v-model="submit.desc">
                            </textarea>
                        </div> -->
                        <a class="btn btn-success btn-lg btn-block" @click="submitSkill">加入兑换列表</a>
                    </div>
                    <h4 class="mb-3">兑换列表</h4>
                    <div class="mb-3" v-if="pcInfo.changeList.length<=0">暂无申请</div>
                    <div class="row" v-if="pcInfo.changeList.length>0">
                        <div class="col-lg-4 col-md-6 mb-3" v-for="(item,index) in pcInfo.changeList">
                            <div class="card ">
                                <div class="card-body" v-if="item.need">
                                    <h5 class="card-title">{{item.name}}</h5>
                                    <h6 class="card-subtitle mb-2 text-muted">等级：{{item.level}}</h6>
                                    <p class="card-text">类型：{{item.type}}</p>
                                    <p class="card-text">元素：{{item.element}}</p>
                                    <p class="card-text">消耗：{{item.need}}</p>
                                    <p class="card-text">介绍：{{item.desc}}</p>
                                    <a href="#" class="card-link" @click="deleteSkill(index)">删除</a>
                                </div>
                                <div class="card-body"  v-if="!item.need">
                                    <h5 class="card-title">{{item.name}}</h5>
                                    <div class="card-subtitle mb-2 text-muted" v-for="items in levelList" v-show="item.level == items.id">等级：{{items.id==0?'残次品':items.name}}</div>
                                    <h6 class="card-subtitle mb-2 text-muted">价格：{{item.price}}</h6>
                                    <p class="card-text">{{item.desc}}
                                    </p>
                                    <a href="#" class="card-link" @click="deleteSkill(index)">删除</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h4 class="mb-3">已有技能</h4>
                    <div class="mb-3" v-if="pcInfo.skillList.length<=0">暂无技能</div>
                    <div class="row">
                        <div class="col-lg-4 col-md-6 mb-3" v-for="(item,index) in pcInfo.skillList">
                            <div class="card ">
                                <div class="card-body">
                                    <h5 class="card-title">锋锐术</h5>
                                    <h6 class="card-subtitle mb-2 text-muted">等级：学院级</h6>
                                    <h6 class="card-subtitle mb-2 text-muted">类型：通用</h6>
                                    <h6 class="card-subtitle mb-2 text-muted">元素：金</h6>
                                    <h6 class="card-subtitle mb-2 text-muted">消耗：3*技能等级 mp/次</h6>
                                    <p class="card-text">使物品变得锋利，下一次攻击获得(3+D5)*技能等级伤害附加
                                    </p>
                                    <a class="card-link" @click="skillLevelUp(index)">升级技能</a>
                                  <a class="card-link" @click="skillLevelReset(index)">还原</a>
                                </div>
                            </div>
                        </div>
                    </div>
                    <h4 class="mb-3">装备格</h4>
                    <div class="weapon-list row">
                        <div class="listitem col-md-3 col-6">
                            <label>武器_左</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in pcInfo.homePack.weapon_l" :selected="item.name==pcInfo.equipmentBar.weapon_l||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                        <div class="listitem col-md-3 col-6">
                            <label>武器_右</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in pcInfo.homePack.weapon_r" :selected="item.name==pcInfo.equipmentBar.weapon_r||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                        <div class="listitem col-md-3 col-6">
                            <label>护甲</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in pcInfo.homePack.armor" :selected="item.name==pcInfo.equipmentBar.armor||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                        <div class="listitem col-md-3 col-6">
                            <label>头饰</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in pcInfo.homePack.helmet" :selected="item.name==pcInfo.equipmentBar.helmet||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                        <div class="listitem col-md-3 col-6">
                            <label>饰品格1</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in pcInfo.homePack.baldric1" :selected="item.name==pcInfo.equipmentBar.baldric1||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                        <div class="listitem col-md-3 col-6">
                            <label>饰品格2</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in pcInfo.homePack.baldri2" :selected="item.name==pcInfo.equipmentBar.baldri2||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                        <div class="listitem col-md-3 col-6">
                            <label>项链</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in pcInfo.homePack.necklace" :selected="item.name==pcInfo.equipmentBar.necklace||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                        <div class="listitem col-md-3 col-6">
                            <label>鞋</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in pcInfo.homePack.shoes" :selected="item.name==pcInfo.equipmentBar.shoes||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                        <div class="listitem col-md-3 col-6">
                            <label>背包</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in pcInfo.homePack.packet" :selected="item.name==pcInfo.equipmentBar.packet||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                        <div class="listitem col-md-3 col-6">
                            <label>其他</label>
                            <select class="form-control" @change="changeElement($event)">
                                <option>请选择</option>
                                <option v-for="item in pcInfo.homePack.others" :selected="item.name==pcInfo.equipmentBar.others||item.id==1">
                                    {{item.name}}</option>
                            </select>
                        </div>
                    </div>
                    <hr class="mb-4">
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="same-address">
                        <label class="custom-control-label" for="same-address">是否缓存本地（推荐 不然你会后悔的，写半天一刷新就没了啊!）</label>
                    </div>
                    <div class="custom-control custom-checkbox">
                        <input type="checkbox" class="custom-control-input" id="save-info">
                        <label class="custom-control-label" for="save-info">是否仅供展示（仅ST可勾选）</label>
                    </div>
                    <hr class="mb-4">
                    <a class="btn btn-primary btn-lg btn-block" @click="downloadFiles">导出人物数据</a>
                    <a class="btn btn-success btn-lg btn-block" @click="downloadFiles">复制数据直接丢st让他贴！</a>
                </form>
            </div>
        </div>

        <footer class="my-5 pt-5 text-muted text-center text-small">
            <p class="mb-1">© 2017-2021 Company Name</p>
            <ul class="list-inline">
                <li class="list-inline-item"><a href="#">Privacy</a></li>
                <li class="list-inline-item"><a href="#">Terms</a></li>
                <li class="list-inline-item"><a href="#">Support</a></li>
            </ul>
        </footer>
    </div>

    <script src="https://unpkg.com/vue@next"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/js/bootstrap.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/FileSaver.js/2.0.5/FileSaver.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.2.2/echarts.min.js"></script>
    <script src="js/global.js"></script>
    <script type="module">
        import { powerList, skillList, talentList, elementList,levelList,helmet, armor, weapon_l, weapon_r, baldric1, baldric2, necklace, shoes, packet,others} from './js/data.js'
        var app = Vue.createApp({
            data() {
                return {
                    //兑换提交
                    submit: {
                        name: '',
                        level: '',
                        desc: '',
                    },
                    buyType:0,
                    weaponType:0,
                    skillType:0,
                    goodsInfo:{
                        id:''
                    },
                    powerList: powerList,
                    skillList: skillList,
                    talentList: talentList,
                    elementList: elementList,
                    levelList:levelList,
                    helmet:helmet, 
                    armor:armor, 
                    weapon_l:weapon_l, 
                    weapon_r:weapon_r, 
                    baldric1:baldric1, 
                    baldric2:baldric2, 
                    necklace:necklace, 
                    shoes:shoes, 
                    packet:packet,
                    others:others,
                    charAttr: [],
                    pcInfo: {
                        admin: 0,//ST权限
                        PLname: '',//扮演者
                        name: '',//姓名
                        age: '',//年龄
                        sex: '男',//性别
                        level: 1,//等级
                        levelPoint: '',//评分
                        death: 0,
                        power: '',//所属
                        element: 1,//元素天赋
                        hounor: '',//荣誉
                        image: '',//立绘
                        story: '',//角色背景
                        character: '',//性格
                        occupation: '',//背景
                        attrCoin: 36,//属性点
                        exp: 0,//exp
                        coin: 120,//金钱
                        crystal_0: 0,//劣晶石
                        crystal_1: 0,//胶体晶
                        crystal_2: 0,//透光晶
                        crystal_3: 0,//微光晶
                        crystal_4: 0,//半纯晶
                        crystal_5: 0,//纯晶
                        rolePack: [],//包裹栏，跟装备栏背包品质相关
                        homePack:{
                            helmet:[],
                            armor:[],
                            weapon_l:[],
                            weapon_r:[],
                            baldric1:[],
                            baldric2:[],
                            necklace:[],
                            shoes:[],
                            package:[],
                        },
                        changeList: [],//兑换物品列表
                        equipmentBar: {//装备栏
                            helmet:0,
                            armor:0,
                            weapon_l:0,
                            weapon_r:0,
                            baldric1:0,
                            baldric2:0,
                            necklace:0,
                            shoes:0,
                            package:0,
                        },
                        skillList: [//技能列表 
                            
                        ],
                        talent: [],
                        attribute: {//人物属性这边 对应了战斗模拟器那边的属性，方便模型计算
                            str: 0,
                            con: 0,
                            dex: 0,
                            mag: 0,
                            chr: 0,
                            ler: 0,
                            lucky: 10,
                            hujia: 0,
                            mp: 0,
                            hp: 0,
                            fmsh_jin: 0,//以下是附魔伤害附加值
                            fmsh_mu: 0,
                            fmsh_shui: 0,
                            fmsh_huo: 0,
                            fmsh_tu: 0,
                            fmsh_f: 0,
                            fmsh_l: 0,
                            fmsh_sg: 0,
                            fmsh_ha: 0,
                            fmdk_jin: 0,//以下是附魔抵抗附加值
                            fmdk_mu: 0,
                            fmdk_shui: 0,
                            fmdk_huo: 0,
                            fmdk_tu: 0,
                            fmdk_f: 0,
                            fmdk_l: 0,
                            fmdk_sg: 0,
                            fmdk_ha: 0,
                            mag_dikang: 0,
                            contrl_dikang: 0,
                        }
                    }
                }
            },
            mounted() {
                this.getEchartData()
            },

            created() { // 页面创建
                this.pcInfo.level = modalLevel(this.pcInfo.attribute)
                this.pcInfo.levelPoint = getLevel(this.pcInfo.attribute)
               
            },
            methods: { //函数方法集
                getEchartData() {//获取图表信息
                    let pcInfo = this.pcInfo
                    let data = [this.pcInfo.attribute.str,this.pcInfo.attribute.con,this.pcInfo.attribute.dex,this.pcInfo.attribute.mag,this.pcInfo.attribute.ler,this.pcInfo.attribute.chr]
                    let chart = this.$refs.chart
                    if (chart) {
                        let myChart = echarts.init(chart)
                       
                        let option = {
                            legend: {},
                            title: {
                                text: '人物属性情况'
                            },
                            dataset: {
                                // 提供一份数据。
                                source: [data]
                            },
                            radar: [
                                {
                                    indicator: [
                                        { text: '力量', max:1000  },
                                        { text: '体质', max:1000  },
                                        { text: '敏捷', max:1000  },
                                        { text: '精神', max:1000  },
                                        { text: '智力', max:1000  },
                                        { text: '魅力', max:1000  }
                                    ],
                                    
                                    center: ['50%', '50%'],
                                    radius: 100,
                                    axisName: {
                                        color: '#666',
                                    }
                                }
                            ],
                            series: [
                                {
                                    type: 'radar',
                                },
                            ]
                        }
                        myChart.setOption(option,true)
                    }
                },
                //属性改变
                onAttrChange: function (e, state) {
                    let oldAttr = this.pcInfo.attribute[state]
                    let newAttr = Number(e.target.value)
                    let oldCoin = this.pcInfo.attrCoin
                    this.pcInfo.attrCoin = oldCoin - newAttr + oldAttr
                    if(this.pcInfo.attrCoin<0){
                        this.pcInfo.attrCoin = oldCoin 
                        alert('属性点不可透支！')
                        return
                    }
                    this.pcInfo.attribute[state] = newAttr
                   
                    this.pcInfo.level = modalLevel(this.pcInfo.attribute)
                    this.pcInfo.levelPoint = getLevel(this.pcInfo.attribute)
                    this.getEchartData()
                },
                //选择天赋特征
                changeTalent: function (e, index) {
                    this.pcInfo.talent[index] = e.target.value;
                    if (this.pcInfo.talent[0] == this.pcInfo.talent[1]) {
                        this.pcInfo.talent[index] = ''
                        alert('你难道以为重复会叠加吗?')
                    }
                },
                //改变所属势力
                changePower: function (e, index) {
                    this.pcInfo.power = e.target.value;
                },
                //选择元素天赋
                changeElement: function (e, index) {
                    this.pcInfo.element = e.target.value;
                },
                //选择性别
                changeSex: function (e) {
                    this.pcInfo.sex = e.target.value;
                },
                //改变兑换类别
                changebuyType: function (e) {
                    this.buyType = e.target.value;
                    this.weaponType = 0
                    this.skillType = 0
                    //展示数据初始化
                    this.goodsInfo = {
                        name: '',
                        type:'',
                        level: '',
                        desc: ''
                    }
                    this.submit = {
                        name: '',
                        type:'',
                        level: '',
                        desc: ''
                    }
                },
                //改变武器类别
                changeWeaponType: function (e) {
                    this.weaponType = e.target.value;
                    //展示数据初始化
                    this.goodsInfo = {
                        name: '',
                        type:'',
                        level: '',
                        desc: ''
                    }
                    this.submit = {
                        name: '',
                        type:'',
                        level: '',
                        desc: ''
                    }
                },
                //改变技能类别
                changeSkillType: function (e) {
                    this.skillType = e.target.value;
                    //展示数据初始化
                    this.goodsInfo = {
                        name: '',
                        type:'',
                        level: '',
                        desc: ''
                    }
                    this.submit = {
                        name: '',
                        type:'',
                        level: '',
                        desc: ''
                    }
                },
                //选择兑换
                chooseGoods: function (e) {
                    var goods_id = e.target.value
                    var goods_type = this.buyType==1?this.skillType:this.weaponType
                    let list = []
                    if(this.buyType==1){
                        this.skillList.forEach(item => {
                            if(item.id == goods_id){
                                this.goodsInfo = item
                            }
                        });
                    }else if(this.buyType==2){
                        if (goods_type == 1){
                            list = this.weapon_l
                        }
                        else if (goods_type == 2){
                            list = this.weapon_r
                        }
                        else if (goods_type == 3){
                            list = this.armor
                        }
                        else if (goods_type == 4){
                            list = this.helmet
                        }
                        else if (goods_type == 5){
                            list = this.baldric1
                        }
                        else if (goods_type == 6){
                            list = this.baldric2
                        }
                        else if (goods_type == 7){
                            list = this.necklace
                        }
                        else if (goods_type == 8){
                            list = this.shoes
                        }
                        else if (goods_type == 9){
                            list = this.package
                        }
                        // else if (goods_type == 10){
                        //     list = this.others
                        // }
                        list.forEach(item => {
                            if(item.id == goods_id){
                                this.goodsInfo = item
                            }
                        });
                    }
                },
                //加载导入数据
                loadFiles: function () {
                    var selectedFile = document.getElementById("files").files[0];//获取读取的File对象
                    var name = selectedFile.name;
                    var size = selectedFile.size;
                    // console.log("文件名:" + name + "大小：" + size);
                    var reader = new FileReader();
                    reader.readAsText(selectedFile);
                    reader.onload = function (e) {
                        let json = JSON.parse(e.currentTarget.result);
                        this.pcInfo = json
                        this.getEchartData()
                    }.bind(this);
                   

                },
                //下载数据
                downloadFiles: function () {
                    let data = this.pcInfo
                    var content = JSON.stringify(data);
                    var timestamp = new Date().getTime();
                    var blob = new Blob([content], { type: "text/plain;charset=utf-8" });
                    saveAs(blob, "pc_" + timestamp + ".json");
                },
                saveFiles: function () {
                    let data = this.pcInfo
                    var content = JSON.stringify(data);
                    var timestamp = new Date().getTime();
                    var blob = new Blob([content], { type: "text/plain;charset=utf-8" });
                    saveAs(blob, "pc_" + timestamp + ".json");
                },
                //图片base64转码
                base64: function () {
                    let fileObj = document.getElementById('image').files[0]  //获取文件对象
                    let reader = new FileReader()
                    reader.readAsDataURL(fileObj)
                    reader.onload = function (e) {
                        this.pcInfo.image = e.target.result
                    }.bind(this)
                },
                submitSkill: function () {
                    if(!this.goodsInfo.name){
                        alert('你提交什么呢你提交！')
                        return
                    }
                    if(this.buyType == 1){
                        if(this.goodsInfo.price>this.pcInfo.exp){
                        alert('先掂量一下自己的经验有几斤几两吧！')
                        return
                    }   

                        this.pcInfo.changeList.push(this.goodsInfo)
                        this.pcInfo.exp = this.pcInfo.exp - this.goodsInfo.price
                        this.skillType = 0
                        this.buyType = 0
                        this.goodsInfo = {
                        name: '',
                        need:'',
                        type:'',
                        level: '',
                        desc: ''
                    }
                    }else if (this.buyType == 2){
                        if(this.goodsInfo.price>this.pcInfo.coin){
                        alert('钱不够了！QAQ想想办法吧！')
                        return
                    }   
                        
                        this.goodsInfo.type = this.weaponType
                        this.pcInfo.changeList.push(this.goodsInfo)
                        this.pcInfo.coin = this.pcInfo.coin - this.goodsInfo.price
                        
                        if (this.goodsInfo.type == 1){
                            this.pcInfo.homePack.weapon_l.push(this.goodsInfo)
                        }
                        else if (this.goodsInfo.type == 2){
                            this.pcInfo.homePack.weapon_r.push(this.goodsInfo)
                        }
                        else if (this.goodsInfo.type == 3){
                            this.pcInfo.homePack.armor.push(this.goodsInfo)
                        }
                        else if (this.goodsInfo.type == 4){
                            this.pcInfo.homePack.helmet.push(this.goodsInfo)
                        }
                        else if (this.goodsInfo.type == 5){
                            this.pcInfo.homePack.baldric1.push(this.goodsInfo)
                        }
                        else if (this.goodsInfo.type == 6){
                            this.pcInfo.homePack.baldric2.push(this.goodsInfo)
                        }
                        else if (this.goodsInfo.type == 7){
                            this.pcInfo.homePack.necklace.push(this.goodsInfo)
                        }
                        else if (this.goodsInfo.type == 8){
                            this.pcInfo.homePack.shoes.push(this.goodsInfo)
                        }
                        else if (this.goodsInfo.type == 9){
                            this.pcInfo.homePack.package.push(this.goodsInfo)
                        }
                        this.weaponType = 0
                        this.buyType = 0
                        this.goodsInfo = {
                        name: '',
                        need:'',
                        type:'',
                        level: '',
                        desc: ''
                    }
                    }
                   
                    

                },
                deleteSkill: function (index) {
                    this.pcInfo.changeList.splice(index, 1)

                },

            }
        })
        app.mount('#app')
    </script>
</body>


</html>